<template>
	<view class="allshopping">
		<view class="kong">
			
		</view>
		<view class="navigation" @click="fanhui">
			<view class="navigation-left">
				<image src="@/static/TestImg/arrow-left.png" mode=""></image>
			</view>
			<view class="navigation-center">
				<u-sticky bgColor="#fff">
					<u-tabs :list="list" @click="click" lineColor="#f72647" lineWidth="60rpx" lineHeight="4rpx"
						:activeStyle="{
						color:'#323232',
						fontWeight:'600',
					}" :inactiveStyle="{
						color:'#8b8b8b',
						fontSize:'30rpx'
					}" :current="current"></u-tabs>
				</u-sticky>
			</view>
			<view class="navigation-right"></view>
		</view>
		<view class="shopAll">
			<view v-if="a">
				<view class="search-box">
					<u-search placeholder="搜索已关注的店铺" v-model="keyword" :show-action="false"
						margin="20rpx 30rpx 40rpx 30rpx" height="70rpx" searchIconSize="50rpx">
					</u-search>
				</view>
				<view class="Merchant-information" v-for="(item,index) in CompanyData" :key="index">
					<view class="Merchant-image">
						<image :src="item.MerchantImage" mode=""></image>
					</view>
					<view class="Merchant-name-box">
						<view class="Merchant-name">
							{{item.MerchantName}}的店
					</view>
						<view class="Merchant-type-fans">
							<text class="Merchant-type">
								{{item.MerchantType}}
							</text>
							<text class="">|</text>
							<text class="Merchant-fans">
								{{item.MerchantFans}}粉丝
							</text>
						</view>
					</view>
					<view class="enter-shop-box">
						<view class="enter-shop">
							进店
						</view>
					</view>
				</view>
		<footer>
			<view class="the-end">
				- THE END -
			</view>
		</footer>
		</view>
		<view v-if="b">
			<view class="search-box">
						<u-search placeholder="搜索逛过的店铺" v-model="keyword" :show-action="false"
							margin="20rpx 30rpx 40rpx 30rpx" height="70rpx" searchIconSize="50rpx">
						</u-search>
					</view>
					<view class="Merchant-information" v-for="(item,index) in CompanyData" :key="index">
						<view class="Merchant-image">
							<image :src="item.MerchantImage" mode=""></image>
						</view>
						<view class="Merchant-name-box">
							<view class="Merchant-name">
								{{item.MerchantName}}的店
							</view>
							<view class="Merchant-type-fans">
								<text class="Merchant-type">
									{{item.MerchantType}}
								</text>
								<text class="">|</text>
								<text class="Merchant-fans">
									{{item.MerchantFans}}粉丝
								</text>
							</view>
						</view>
						<view class="enter-shop-box">
							<view class="enter-shop">
								进店
							</view>
						</view>
					</view>
			<footer>
				<view class="the-end">
					- THE END -
				</view>
			</footer>
		</view>
		<view v-if="c">
			<view class="noshop">
				<image src="@/static/TestImg/bizManage.png" mode=""></image>
				<view class="caducity-noshop">
					暂时没有买过的店
				</view>
			</view>
		</view>
</view>
	</view>
</template>

<script>

	export default {
		
		data() {
			return {
				list: [{
						name: "关注"
					},
					{
						name: "逛过"
					},
					{
						name: "买过"
					}
				],
				a: true,
				b: false,
				c: false,
				keyword:"",
				current: 0,
				CompanyData: [{
					MerchantImage: require("../../static/TestImg/portrait.jpg"),
					MerchantName: "美羊羊编程设计",
					MerchantType: "博主",
					MerchantFans: 6000,

				}]
			}
		},
	
    
		methods: {   
			fanhui(){
				uni.navigateBack({
					delta : 1
				})
			},
			click(e){
			if(e.index==0){
				this.a=true
				this.b=false
				this.c=false
			}else if(e.index==1){
				this.a=false
				this.b=true
				this.c=false
			}else if(e.index==2){
				this.a=false
				this.b=false
				this.c=true
			}
		}}
	}
</script>

<style scoped>
	.kong{
		width: 100%;
		height: 60rpx;
		
	}
	.navigation {
		width: 100%;
		height: 90rpx;
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		box-sizing: border-box;
		/* background-color: aquamarine; */
	}

	.navigation-right,
	.navigation-left {
		width: 20%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		/* background-color: antiquewhite; */
	}

	.navigation-left image {
		width: 40%;
		height: 67%;
		object-fit: cover;
		object-position: center;
	}

	.navigation-center {
		width: 80%;
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		/* background-color: aqua; */
	}

	.Merchant-information {
		width: 100%;
		height: 180rpx;
		display: flex
			/* ;
		background-color: aquamarine; */
	}

	.Merchant-image {
		width: 20%;
		height: 180rpx;
		/* background-color: antiquewhite; */
		display: flex;
		align-items: center;
		justify-content: end;
	}

	.Merchant-image>image {
		width: 110rpx;
		height: 110rpx;
		border-radius: 50%;
		border: 1rpx solid rgba(0, 0, 0, 0.1);
	}

	.Merchant-name-box {
		width: 58%;
		height: 180rpx;
		margin-left: 20rpx;
		/* background-color: gold; */
	}

	.Merchant-name {
		width: 100%;
		height: 90rpx;
		/* background-color: deeppink; */
		display: flex;
		align-items: end;
		font-size: 30rpx;
	}

	.Merchant-type-fans {
		width: 100%;
		height: 80rpx;
		/* background-color: brown; */
	}

	.Merchant-type-fans>.Merchant-type,
	.Merchant-type-fans text,
	.Merchant-type-fans>.Merchant-fans {
		font-size: 25RPX;
		color: rgba(0, 0, 0, 0.5);
		margin-right: 10rpx;
	}

	.enter-shop-box {
		width: 22%;
		height: 180rpx;
		/* background-color: blue; */
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.enter-shop {
		width: 100rpx;
		height: 50rpx;
		background-color: rgb(235 235, 246);
		border-radius: 30rpx;
		font-size: 25RPX;
		color: rgba(0, 0, 0, 0.5);
		text-align: center;
		line-height: 50rpx;
	}

	.the-end {
		width: 100%;
		height: 100rpx;
		/* background-color: antiquewhite; */
		display: flex;
		justify-content: center;
		align-items: center;
		color: rgba(0, 0, 0, 0.3);
		font-size: 28rpx;
	}
	.noshop{
		width: 200rpx;
		height: 260rpx;
		/* background-color: aqua; */
		margin-left: 37%;
		margin-top: 30%;
	}
	.noshop image{
		width: 200rpx;
		height: 150rpx;
		object-fit: cover;
		object-position: center;
	}
	.caducity-noshop{
		width: 200rpx;
		height: 60rpx;
		/* background-color: antiquewhite; */
		line-height: 60rpx;
		color: rgba(0, 0, 0, 0.6);
		font-size: 25rpx;
	}
</style>